import './index.css'
import React, { useState, useEffect } from 'react';
import { Input, Button, Select, Table, Tag, Space, Pagination, Breadcrumb } from 'antd';
import ModaleditE from './components/ModaleditE/ModaleditE';
import ModaladdE from './components/ModaladdE/ModaladdE';
import ModalseeE from './components/ModalseeE/ModalseeE'
import ModaldelE from './components/ModaldelE/ModaldelE';
import http from '../../../utils/http';
import Search from 'antd/lib/input/Search';
function EvaluationConfiguration() {
    //时间
    function onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    }
    function onOk(value) {
        console.log('onOk: ', value);
    }

    // 下拉框
    const { Option } = Select;
    function handleChange(value) {
        console.log(`selected ${value}`);
    }

    const [activeUser, changeUser] = useState("Chris")



    let [page, setpage] = useState(1)
    let [pageSize, setpageSize] = useState(10)
    let [total, stetotal] = useState('')

    // 条数
    const pagingtotal = () => {
        http({
            url: '/configuration/count',
            method: 'get',
        }).then((res) => {
            stetotal(res.data[0].count)
            // if(res.data[0].count%10==0){
            //     if((res.data[0].count/10)==1){
            //         setpage(res.data[0].count/10)
            //         console.log(res.data[0].count/10);
            //         setpage(1)
            //     }else{
            //         setpage(page-1) 
            //         console.log(page);
            //     }
            // }
        })
    }

    const fn = () => {
        console.log(page);
        http({
            url: '/configuration/Evaluation',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            res.data && res.data.forEach((v, i) => {
                v.State == 1 ? v.state = "启用" : v.state = "禁用"
            });
            stecolumns(res.data)
        })
    }

    // 挂载
    const [columnsdata, stecolumns] = useState('')
    useEffect(() => {
        fn()
        pagingtotal()
    }, [page])

    const paging = (page, pageSize) => {
        setpage(page)
        fn()
    }


    let [Question_name,setQuestion_name]=useState('')
    const SearchQuestion_name=(v)=>{
    console.log(v.target.value);
    setQuestion_name(v.target.value)
    }

    let [state,setstate]=useState()
    const SearchState=(v)=>{
        console.log(v);
        setstate(v)
    }

    const search=()=>{
        http({
            url:'/configurationEvaluation/search',
            method:"get",
            data:{
                Question_name:Question_name,
                state:state,
                page: page,
                pageSize: pageSize
            }
        }).then((res)=>{
            console.log(res);
            res.data && res.data.forEach((v, i) => {
                v.state == 1 ? v.state = "启用" : v.state = "禁用"
            });
            stecolumns(res.data)
        })
    }

    //表格
    const columns = [
        {
            title: '问题名称',
            dataIndex: "Question_name",
            key: "Question_name",
            // render: text => <a>{text}</a>,
        },
        {
            title: '问题答案1',
            dataIndex: "answer1",
            key: "answer2",
        },
        {
            title: '问题答案2',
            dataIndex: 'answer2',
            key: 'answer2',
        },
        {
            title: '创建时间',
            dataIndex: 'creatTime',
            key: 'creatTime',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <ModalseeE content={record} />
                    <ModaleditE content={record} fn={fn} />
                    <ModaldelE  content={record}  fn={fn} pagingtotal={pagingtotal} />
                </Space>
            ),
        },
    ];


    const data = [
        {
            QuestionName: '服务时长',
            answer1: '大于一小时',
            answer2: '小于一小时',
            CreationTime: '2018-11-08 19:22:09',
            status: '禁用',
        },
    ];
    return (
        <div id="EvaluationConfigurationBox">
            {/* <div>健康数据</div> */}
            <p>健康数据</p>
            <div className="Breadcrumb">
                <Breadcrumb>
                    {/* <Breadcrumb.Item>健康管理</Breadcrumb.Item> */}
                    <Breadcrumb.Item>
                        <a href="">评价管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">评价配置</a>
                    </Breadcrumb.Item>
                    {/* <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
                </Breadcrumb>
            </div>
            <div className="h1_shuruT">
                <div className="h1_shurusss">
                    <div className="h1_shuru_ss">
                        <span className="h1_shuru_ss_name">名称</span>
                        <Input className="h1_shuru_c1" onChange={SearchQuestion_name} placeholder="请输入名称" /></div>
                    <div>
                        <span className="h1_shuru_s">状态</span>
                        <Select onChange={SearchState}  className="h1_shuru_c3" defaultValue="请选择" allowClear>
                            <Option className="h1_shuru_c3" value="0">禁用</Option>
                            <Option className="h1_shuru_c3" value="1">启用</Option>
                        </Select>
                    </div>
                    <div>
                        <Button size="small" onClick={search} className="h1_shuru_c4" type="primary">筛选</Button>
                    </div>
                </div>
                <div>
                    <ModaladdE fn={fn} pagingtotal={pagingtotal} />
                </div>
            </div>

            <Table
                rowKey="Question_id"
                columns={columns} dataSource={columnsdata} pagination={false} />
            <div className="Pagination">
                <Pagination
                    onChange={paging}
                    total={total}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共${total}`}
                />
            </div>
        </div>
    )
}
export default EvaluationConfiguration